<template>
  <el-container class="course-detail">
    <!-- 顶部栏 -->
    <el-header>
      <div class="header-content">
        <span class="course-name">{{ course.name }}</span>
        <el-button type="primary" @click="goBack" class="return-btn">返回</el-button>
      </div>
    </el-header>

 <el-container class="main-container">
      <!-- 导航栏 -->
      <el-aside width="250px">
        <el-menu
          default-active="1-1"
          class="el-menu-vertical-demo"
          :ellipsis="false"
          @select="handleSelect"
          @close="handleClose">
          <el-sub-menu index="1">
            <template #title>
              <el-icon><InfoFilled /></el-icon>
              <span>课程信息</span>
            </template>
            <el-menu-item index="1-1">课程介绍</el-menu-item>
            <el-menu-item index="1-2">教师信息</el-menu-item>
            <el-menu-item index="1-3">教学大纲</el-menu-item>
          </el-sub-menu>
          <el-sub-menu index="2">
            <template #title>
              <el-icon><Folder /></el-icon>
              <span>课程资源</span>
            </template>
            <el-menu-item index="2-1">教材资料</el-menu-item>
          </el-sub-menu>
          <el-sub-menu index="4">
            <template #title>
              <el-icon><EditPen /></el-icon>
              <span>课程考核</span>
            </template>
            <el-menu-item index="4-1" v-if="userInfo.role === 'teacher'">作业</el-menu-item>
            <el-menu-item index="4-2" v-if="userInfo.role === 'student'">作业互评</el-menu-item>
            <el-menu-item index="4-3" v-if="userInfo.role === 'teacher'">考试</el-menu-item>
            <el-menu-item index="4-4" v-if="userInfo.role === 'student'">作业</el-menu-item>
            <el-menu-item index="4-5" v-if="userInfo.role === 'student'">考试</el-menu-item>
          </el-sub-menu>
          <el-sub-menu index="5">
            <template #title>
              <el-icon><ChatLineRound /></el-icon>
              <span>答疑讨论</span>
            </template>
            <el-menu-item index="5-1">讨论区</el-menu-item>
            <el-menu-item index="5-2">在线答疑</el-menu-item>
          </el-sub-menu>

          <el-sub-menu index="7" v-if="userInfo.role === 'teacher'">
        <template #title>
          <el-icon><Management /></el-icon>
          <span>课程管理</span>
        </template>
        <el-menu-item index="7-1">更新课程信息</el-menu-item>
        <el-menu-item index="7-2">上传课程封面</el-menu-item>
        <el-menu-item index="7-3">创建课程资源</el-menu-item>
      </el-sub-menu>
            <el-sub-menu index="8" v-if="userInfo.role === 'teacher'">
                <template #title> <!-- 加这个 -->
                    <el-icon><Connection /></el-icon>
                    <span>课程状态</span>
                </template>
                <el-menu-item index="8-1">查看课程学生状态</el-menu-item>
                <el-menu-item index="8-2">修改课程信息状态</el-menu-item>
            </el-sub-menu>
          <el-sub-menu index="9">
            <template #title>
              <el-icon><ChatLineRound /></el-icon>
              <span>AI 对话助手</span>
            </template>
            <el-menu-item index="9-1">查看对话记录</el-menu-item>
          </el-sub-menu>

        </el-menu>
      </el-aside>

      <!-- 主要内容区域 -->
      <el-main>
          <!-- 课程资源部分 -->
          <el-card v-if="activeMenu === '2-1' || activeMenu === '2-2'" class="resource-card">
              <template #header>
                  <div class="card-header">
                      <h3>课程资源</h3>
                  </div>
              </template>
              <el-table :data="course.resources" style="width: 100%">
                  <el-table-column prop="name" label="资源名称" ></el-table-column>
                  <el-table-column prop="resource_type" label="资源类型"></el-table-column>
                  <el-table-column label="操作" width="100">
                      <template #default="{ row }">
                          <a
                                  :href="row.file_path + '?download'"
                                  :download="getFileName(row.file_path)"
                                  class="download-link"
                          >
                              下载
                          </a>
                      </template>
                  </el-table-column>
              </el-table>
          </el-card>
          <!-- 修改课程信息状态 -->
          <el-card v-if="activeMenu === '8-2'" class="info-card">
              <template #header>
                  <div class="card-header">
                      <h3>修改课程信息状态</h3>
                  </div>
              </template>
              <el-table :data="[course]" style="width: 100%" border stripe>
                  <el-table-column prop="id" label="课程号" width="120" align="center"></el-table-column>
                  <el-table-column prop="name" label="课程名" min-width="200" align="center"></el-table-column>
                  <el-table-column label="操作" width="240" align="center">
                      <template #default="scope">
                          <el-button
                                  type="success"
                                  size="small"
                                  @click="startCourse(scope.row.id)"
                          >
                              开课
                          </el-button>
                          <el-button
                                  type="danger"
                                  size="small"
                                  @click="endCourse(scope.row.id)"
                          >
                              结课
                          </el-button>
                      </template>
                  </el-table-column>
              </el-table>
          </el-card>
          <!-- 课程学生状态 -->
          <el-skeleton :loading="loading" animated>
              <template #default>
                  <div class="student-status-table" v-if="activeMenu === '8-1'">
                      <h2>课程学生状态</h2>
                      <el-table :data="students" style="width: 100%" border stripe>
                          <el-table-column type="index" label="序号" width="80" align="center"></el-table-column>
                          <el-table-column prop="user_id" label="学号" width="120" align="center"></el-table-column>
                          <el-table-column prop="name" label="姓名" width="120" align="center"></el-table-column>
                          <el-table-column prop="status" label="状态" width="120" align="center">
                              <template #default="scope">
                                  {{ translateStatus(scope.row.status) }}
                              </template>
                          </el-table-column>
                          <el-table-column prop="final_grade" label="最终成绩" max-width="120" align="center">
                              <template #default="scope">
                                  {{ scope.row.final_grade || '暂无' }}
                              </template>
                          </el-table-column>
                      </el-table>
                  </div>


                  <div class="course-content">
              <!-- 课程简介 -->
              <el-card v-if="activeMenu === '1-1'" class="info-card">
                <template #header>
                  <div class="card-header">
                    <h3>课程简介</h3>
                  </div>
                </template>
                <p>{{ course.description }}</p>
              </el-card>

              <!-- 教师信息 -->
              <el-card v-if="activeMenu === '1-2'" class="info-card">
                <template #header>
                  <div class="card-header">
                    <h3>教师信息</h3>
                  </div>
                </template>
                <el-descriptions :column="1" border>
                  <el-descriptions-item label="教师姓名">{{ course.teacher.username }}</el-descriptions-item>
                  <el-descriptions-item label="教师ID">{{ course.teacher.id }}</el-descriptions-item>
                  <el-descriptions-item label="联系邮箱">{{ course.teacher.email }}</el-descriptions-item>
                </el-descriptions>
              </el-card>
              <!-- 教学大纲 -->
              <el-card v-if="activeMenu === '1-3'" class="info-card">
                <template #header>
                  <div class="card-header">
                    <h3>教学大纲</h3>
                  </div>
                </template>
                 <p>{{ course.syllabus}}</p>
              </el-card>

                <!-- 作业管理部分:教师 -->
                <AssignmentTeacher
        v-if="activeMenu === '4-1' && userInfo.role === 'teacher'"
        :course-id="courseId"
    />

                      <!-- 作业管理部分:学生 -->
                    <AssignmentStudent v-if="activeMenu === '4-4' && userInfo.role === 'student'" :course-id="courseId" />
                      <!-- 作业互评部分:学生 -->
                    <AssignmentPeerReview v-if="activeMenu === '4-2' && userInfo.role === 'student'" :course-id="courseId" />

          <!-- 考试部分:老师 -->
            <ExamTeacher v-if="activeMenu === '4-3' && userInfo.role === 'teacher'" :course-id="courseId" />
           <!-- 考试部分:学生 -->
            <ExamStudent v-if="activeMenu === '4-5' && userInfo.role === 'student'" :course-id="courseId" />

                    <!-- 讨论区部分 -->
                    <CourseDiscussion
                      v-if="activeMenu === '5-1'"
                     :course-id="courseId"
                     :course="course"
                    />



                <!-- 更新课程信息 -->
               <el-card v-if="activeMenu === '7-1'" class="info-card">
             <template #header>
            <div class="card-header">
                 <h3>更新课程信息</h3>
                 </div>
            </template>
               <el-descriptions :column="1" border>
             <el-descriptions-item label="课程ID">{{ course.id }}</el-descriptions-item>
              <el-descriptions-item label="课程名称">{{ course.name }}</el-descriptions-item>
             <el-descriptions-item label="课程描述">{{ course.description }}</el-descriptions-item>
              <el-descriptions-item label="学期">{{ course.semester }}</el-descriptions-item>
              <el-descriptions-item label="课程时间">{{ formatCourseTime(course.time) }}</el-descriptions-item>
              <el-descriptions-item label="教学大纲">{{ course.syllabus }}</el-descriptions-item>
                  </el-descriptions>
                 <el-button type="primary" @click="openUpdateDialog" style="margin-top: 20px;">
                   修改课程信息
                 </el-button>
               </el-card>
               <!-- 上传课程封面 -->
              <el-card v-if="activeMenu === '7-2'" class="info-card">
                <template #header>
                  <div class="card-header">
                    <h3>课程封面</h3>
                  </div>
                </template>
                <div class="cover-container">
                  <img :src="course.cover" alt="课程封面" class="course-cover" />
                </div>
                <el-button type="primary" @click="openUploadDialog" style="margin-top: 20px;">
                  上传新封面
                </el-button>
              </el-card>
              <!-- 课程资源 -->
              <el-card v-if="activeMenu === '7-3'" class="info-card">
                <template #header>
                  <div class="card-header">
                    <h3>课程资源</h3>
                  </div>
                </template>
                <el-table :data="course.resources" style="width: 100%">
                  <el-table-column prop="name" label="资源名称"></el-table-column>
                  <el-table-column prop="resource_type" label="资源类型"></el-table-column>
                  <el-table-column label="操作" width="200">
                    <template #default="scope">
                      <el-button type="text" size="small" @click="downloadResource(scope.row)">下载</el-button>
                      <el-button type="text" size="small" @click="confirmDeleteResource(scope.row)" style="color: #F56C6C;">删除</el-button>
                    </template>
                  </el-table-column>
                </el-table>
                <el-button type="primary" @click="openUploadResourceDialog" style="margin-top: 20px;">
                  上传新资源
                </el-button>
              </el-card>
            </div>
          </template>
        </el-skeleton>
        <!--新增内容   AI 对话助手 -->
        <el-card v-if="activeMenu === '9-1'" class="ai-chat-assistant">
          <template #header>
            <div class="card-header">
              <h3>AI 对话助手</h3>
            </div>
          </template>
          <AIChatAssistant :course-id="courseId" />
        </el-card>
      </el-main>
    </el-container>

    <!-- 更新课程信息的对话框 -->
<el-dialog v-model="updateDialogVisible" title="更新课程信息" width="50%">
  <el-form :model="updateForm" label-width="120px">
    <el-form-item label="课程名称">
      <el-input v-model="updateForm.name"></el-input>
    </el-form-item>
    <el-form-item label="课程描述">
      <el-input v-model="updateForm.description" type="textarea" :rows="4"></el-input>
    </el-form-item>
    <el-form-item label="学期">
      <el-input v-model="updateForm.semester" placeholder="格式：YYYY-YYYY"></el-input>
    </el-form-item>
    <el-form-item label="课程时间">
      <el-input v-model="updateForm.time" type="textarea" :rows="4" placeholder="格式：{'1': [1, 2], '3': [3, 4]}"></el-input>
    </el-form-item>
    <el-form-item label="教学大纲">
      <el-input v-model="updateForm.syllabus" type="textarea" :rows="4"></el-input>
    </el-form-item>
    <el-form-item label="课程封面">
      <el-input v-model="updateForm.cover" placeholder="输入图片URL"></el-input>
    </el-form-item>
  </el-form>
  <template #footer>
    <span class="dialog-footer">
      <el-button @click="updateDialogVisible = false">取消</el-button>
      <el-button type="primary" @click="updateCourseInfo">确认</el-button>
    </span>
  </template>
</el-dialog>
     <!-- 上传课程封面的对话框 -->
    <el-dialog v-model="uploadDialogVisible" title="上传课程封面" width="50%">
      <el-upload
        class="upload-demo"
        drag
        action="#"
        :auto-upload="false"
        :on-change="handleFileChange"
        :file-list="fileList"
      >
        <el-icon class="el-icon--upload"><upload-filled /></el-icon>
        <div class="el-upload__text">
          拖拽文件到此处或 <em>点击上传</em>
        </div>
      </el-upload>
      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="uploadCover">确认上传</el-button>
          <el-button @click="uploadDialogVisible = false">取消</el-button>
        </span>
      </template>
    </el-dialog>
     <!-- 上传课程资源的对话框 -->
    <el-dialog v-model="uploadResourceDialogVisible" title="上传课程资源" width="50%">
      <el-form :model="resourceForm" label-width="120px">
        <el-form-item label="资源名称">
          <el-input v-model="resourceForm.name"></el-input>
        </el-form-item>
        <el-form-item label="资源类型">
          <el-select v-model="resourceForm.resource_type" placeholder="请选择资源类型">
            <el-option label="SLIDES" value="SLIDES"></el-option>
            <el-option label="EXAM" value="EXAM"></el-option>
            <el-option label="EXERCISE" value="EXERCISE"></el-option>
            <el-option label="OTHER" value="OTHER"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="选择文件">
          <el-upload
            class="upload-demo"
            drag
            action="#"
            :auto-upload="false"
            :on-change="handleResourceFileChange"
            :file-list="resourceFileList"
          >
            <el-icon class="el-icon--upload"><upload-filled /></el-icon>
            <div class="el-upload__text">
              拖拽文件到此处或 <em>点击上传</em>
            </div>
          </el-upload>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="uploadResource">确认上传</el-button>
          <el-button @click="uploadResourceDialogVisible = false">取消</el-button>
        </span>
      </template>
    </el-dialog>
    <!-- 删除资源确认对话框 -->
    <el-dialog
      v-model="deleteResourceDialogVisible"
      title="确认删除"
      width="30%"
    >
      <span>确定要删除资源 "{{ resourceToDelete && resourceToDelete.name }}" 吗？此操作不可撤销。</span>
      <template #footer>
        <span class="dialog-footer">
          <el-button type="danger" @click="deleteResource">确认删除</el-button>
          <el-button @click="deleteResourceDialogVisible = false">取消</el-button>
        </span>
      </template>
    </el-dialog>

  </el-container>
</template>


<script setup>
import {ref, onMounted, reactive, nextTick} from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { ElMessage } from 'element-plus'
import axios from 'axios'
import AssignmentTeacher from "@/components/assignment/AssignmentTeacher.vue";
import AssignmentStudent from "@/components/assignment/AssignmentStudent.vue";
import AssignmentPeerReview from "@/components/assignment/AssignmentPeerReview.vue";
import ExamTeacher from "@/components/exam/ExamTeacher.vue";
import CourseDiscussion from "@/components/CourseDiscussion/CourseDiscussion.vue";
import AIChatAssistant from "@/components/AI/AIChatAssistant.vue";

import {
  InfoFilled,
  Folder,
  VideoPlay,
  EditPen,
  ChatLineRound,
  Document,
  Management,
  UploadFilled,
    Connection
} from '@element-plus/icons-vue'
import ExamStudent from "@/components/exam/ExamStudent.vue";





const router = useRouter()
const route = useRoute()
const students = ref([])

const courseId = ref(null)
const course = ref({})
const loading = ref(true)
const activeMenu = ref('1-1')
const updateDialogVisible = ref(false)
const updateForm = reactive({
  name: '',
  description: '',
  semester: '',
  time: '',
  syllabus: '',
  cover: ''
})
const uploadDialogVisible = ref(false)
const fileList = ref([])

const openUploadDialog = () => {
  uploadDialogVisible.value = true
  fileList.value = []
}

const handleFileChange = (file) => {
  fileList.value = [file]
}

const uploadCover = async () => {
  if (fileList.value.length === 0) {
    ElMessage.warning('请选择要上传的封面图片')
    return
  }

  const formData = new FormData()
  formData.append('file', fileList.value[0].raw)

  try {
    const response = await axios.post(
      `/backend/api/course/courses/${courseId.value}/upload_cover/`,
      formData,
      {
        headers: {
          'Content-Type': 'multipart/form-data'
        },
        withCredentials: true
      }
    )
    if (response.status === 200) {
      ElMessage.success('课程封面上传成功')
      uploadDialogVisible.value = false
      fetchCourseDetail() // 重新获取课程信息以更新封面
    }
  } catch (error) {
    console.error('上传课程封面失败:', error)
    ElMessage.error('上传课程封面失败，请稍后重试')
  }
}
const fetchCourseDetail = async () => {
  try {
    const response = await axios.get(`/backend/api/course/courses/${courseId.value}/`, { withCredentials: true })
    course.value = response.data
    loading.value = false
  } catch (error) {
    console.error('获取课程详情失败:', error)
    ElMessage.error('获取课程详情失败，请稍后重试')
    loading.value = false
  }
}

const handleSelect = (key) => {
  activeMenu.value = key;

  // 根据不同的菜单项执行相应的逻辑
  if (key === '8-1') {
    fetchStudentStatus();
  }
};
const openUpdateDialog = () => {
  updateForm.name = course.value.name
  updateForm.description = course.value.description
  updateForm.semester = course.value.semester
  updateForm.time = JSON.stringify(course.value.time)
  updateForm.syllabus = course.value.syllabus
  updateForm.cover = course.value.cover
  updateDialogVisible.value = true
}

const updateCourseInfo = async () => {
  try {
    const response = await axios.patch(
      `/backend/api/course/courses/${course.value.id}/update/`,
      {
        name: updateForm.name,
        description: updateForm.description,
        semester: updateForm.semester,
        time: JSON.parse(updateForm.time),
        syllabus: updateForm.syllabus,
        cover: updateForm.cover
      },
      { withCredentials: true }
    )
    if (response.status === 200) {
      ElMessage.success('课程信息更新成功')
      updateDialogVisible.value = false
      fetchCourseDetail() // 重新获取课程信息以更新页面
    }
  } catch (error) {
    console.error('更新课程信息失败:', error)
    ElMessage.error('更新课程信息失败，请稍后重试')
  }
}

const formatCourseTime = (time) => {
  if (!time) return '未设置'
  const weekdays = ['周一', '周二', '周三', '周四', '周五']
  return Object.entries(time)
    .map(([day, periods]) => `${weekdays[parseInt(day) - 1]} 第${periods.join(',')}节`)
    .join('; ')
}
const uploadResourceDialogVisible = ref(false)
const resourceFileList = ref([])
const resourceForm = reactive({
  name: '',
  resource_type: '',
  file: null
})

const openUploadResourceDialog = () => {
  uploadResourceDialogVisible.value = true
  resourceFileList.value = []
  resourceForm.name = ''
  resourceForm.resource_type = ''
  resourceForm.file = null
}

const handleResourceFileChange = (file) => {
  resourceFileList.value = [file]
  resourceForm.file = file.raw
}

const uploadResource = async () => {
  if (!resourceForm.name || !resourceForm.resource_type || !resourceForm.file) {
    ElMessage.warning('请填写完整的资源信息并选择文件')
    return
  }

  const formData = new FormData()
  formData.append('file', resourceForm.file)
  formData.append('name', resourceForm.name)
  formData.append('resource_type', resourceForm.resource_type)

  try {
    const response = await axios.post(
      `/backend/api/course/courses/${courseId.value}/resources/`,
      formData,
      {
        headers: {
          'Content-Type': 'multipart/form-data'
        },
        withCredentials: true
      }
    )
    if (response.status === 201) {
      ElMessage.success('课程资源上传成功')
      uploadResourceDialogVisible.value = false
      fetchCourseDetail() // 重新获取课程信息以更新资源列表
    }
  } catch (error) {
    console.error('上传课程资源失败:', error)
    ElMessage.error('上传课程资源失败，请稍后重试')
  }
}

const downloadResource = (resource) => {
  // 这里添加下载资源的逻辑
  console.log('下载资源:', resource)
  ElMessage.info('下载功能尚未实现')
}
const deleteResourceDialogVisible = ref(false)
const resourceToDelete = ref(null)

const confirmDeleteResource = (resource) => {
  resourceToDelete.value = resource
  deleteResourceDialogVisible.value = true
}

const deleteResource = async () => {
  if (!resourceToDelete.value) return

  try {
    const response = await axios.delete(
      `/backend/api/course/courses/${courseId.value}/resources/${resourceToDelete.value.id}/`,
      { withCredentials: true }
    )
    if (response.status === 200) {
      ElMessage.success('课程资源删除成功')
      deleteResourceDialogVisible.value = false
      fetchCourseDetail() // 重新获取课程信息以更新资源列表
    }
  } catch (error) {
    console.error('删除课程资源失败:', error)
    ElMessage.error('删除课程资源失败，请稍后重试')
  }
}
const userInfo = ref({
  role: ''
})

const fetchUserInfo = async () => {
  try {
    const response = await axios.get('/backend/api/account/profile/', {
      withCredentials: true
    })
    if (response.status === 200) {
      userInfo.value = response.data
    }
  } catch (error) {
    console.error('获取用户信息失败:', error)
    ElMessage.error('获取用户信息失败，请稍后重试')
  }
}
onMounted(() => {
    document.title = "智慧课程平台"
  courseId.value = route.params.id
  fetchCourseDetail()
  fetchUserInfo()
  if (activeMenu.value === '8-1') {
    fetchStudentStatus()
  }
})


// 翻译学生状态
const translateStatus = (status) => {
    const statusMap = {
        'IN_PROGRESS': '进行中',
        'COMPLETED': '已完成',
        'NOT_STARTED': '未开始'
    }
    return statusMap[status] || status
}
//查看学生状态
const fetchStudentStatus = async () => {
  try {
    const response = await axios.get(
      `/backend/api/course/teacher/courses/${courseId.value}/students/`,
      { withCredentials: true }
    )
    if (response.status === 200) {
      students.value = response.data
    }
  } catch (error) {
    console.error('获取学生状态失败:', error)
    ElMessage.error('获取学生状态失败，请稍后重试')
  }
}


//修改课程状态
const startCourse = async (courseId) => {
    try {
        await axios.post(`/backend/api/course/teacher/courses/${courseId}/start/`, {}, {
            withCredentials: true
        })
        ElMessage.success('课程已开始')
    } catch (error) {
        console.error('开始课程失败:', error)
        ElMessage.error('开始课程失败，请稍后重试')
    }
}

const endCourse = async (courseId) => {
    try {
        await axios.post(`/backend/api/course/teacher/courses/${courseId}/end/`, {}, {
            withCredentials: true
        })
        ElMessage.success('课程已结束')
    } catch (error) {
        console.error('结束课程失败:', error)
        ElMessage.error('结束课程失败，请稍后重试')
    }
}
// 从文件路径中提取文件名
const getFileName = (filePath) => {
    return filePath.split('/').pop()
}
//返回
const goBack = () => {
  router.go(-1)
}


</script>

<style scoped>
/* 课程详情容器 */
.course-detail {
  height: 98vh;
  display: flex;
  flex-direction: column;
}

/* 顶部导航 */
.el-header {
  background-color: #409EFF;
  color: white;
  height: 60px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.header-content {
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.course-name {
  font-size: 18px;
  font-weight: bold;
}

/* 主容器布局 */
.main-container {
  flex: 1;
  display: flex;
  background-color: #f5f7fa;
  overflow: hidden;
}

/* 侧边栏 */
.el-aside {
  background-color: white;
  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.08);
  border-right: 1px solid #e6e6e6;
  transition: width 0.3s;
  z-index: 1;
}

/* 主内容区 */
.el-main {
  flex: 1;
  padding: 24px;
  overflow-y: auto;
  background-color: transparent;
}

/* 卡片通用样式 */
.info-card,
.resource-card {
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  margin-bottom: 24px;
}

/* 卡片内容填充 */
:deep(.el-card__header) {
  padding: 16px 20px;
  border-bottom: 1px solid #ebeef5;
}

:deep(.el-card__body) {
  padding: 20px;
}

/* 卡片标题 */
.card-header {
  display: flex;
  justify-content: space-between;
}

.card-header h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: #303133;
}

/* 表格样式 */
.el-table {
  margin-top: 20px;
}

:deep(.el-table th) {
  background-color: #f5f7fa;
  color: #606266;
  font-weight: 600;
}

/* 上传组件 */
.upload-demo {
  width: 100%;
  margin: 16px 0;
}

:deep(.el-upload-dragger) {
  width: 100%;
  height: 200px;
}

/* 课程封面 */
.cover-container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 20px 0;
  padding: 16px;
  background-color: #f5f7fa;
  border-radius: 8px;
}

.course-cover {
  max-width: 100%;
  max-height: 300px;
  object-fit: contain;
  border-radius: 4px;
}

/* 对话框按钮 */
.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding-top: 20px;
}

/* 下载链接 */
.download-link {
  color: #409EFF;
  text-decoration: none;
  transition: color 0.3s;
}

.download-link:hover {
  color: #66b1ff;
  text-decoration: underline;
}

/* 学生状态表格 */
.student-status-table {
  margin-top: 24px;
}

.student-status-table h2 {
  margin-bottom: 16px;
  font-size: 18px;
  color: #303133;
  font-weight: 600;
}

/* 描述列表样式 */
:deep(.el-descriptions) {
  margin: 16px 0;
}

:deep(.el-descriptions__label) {
  color: #606266;
}

/* 按钮组样式 */
.el-button + .el-button {
  margin-left: 12px;
}

/* 菜单样式优化 */
:deep(.el-menu) {
  border-right: none;
}

:deep(.el-menu-item) {
  height: 50px;
  line-height: 50px;
}

:deep(.el-sub-menu__title) {
  height: 50px;
  line-height: 50px;
}

:deep(.el-menu-item.is-active) {
  background-color: #ecf5ff;
}

/* 表单样式 */
:deep(.el-form-item) {
  margin-bottom: 20px;
}

:deep(.el-form-item__label) {
  font-weight: 500;
}

.resource-card {
    margin: 20px;
    border-radius: 8px;
}

.resource-card :deep(.el-card__header) {
    background-color: #f5f7fa;
    border-bottom: 1px solid #e4e7ed;
}

.resource-card :deep(.el-table) {
    margin-top: 0;
    border-radius: 4px;
}

.resource-card :deep(.el-table th) {
    background-color: #f5f7fa;
    color: #606266;
    font-weight: 600;
    height: 50px;
}

.resource-card :deep(.el-table td) {
    padding: 12px 0;
}

.download-link {
    text-decoration: none;
}

.download-link:hover {
    opacity: 0.8;
}

</style>